<template>
  <div id="app" class="levelManage">
    <div class="search">
    <div class="selectOption">
          <el-button type="success" @click='addAdvertisers'> 添加用户等级</el-button>
    </div>
    </div>
    <!--用户等级页面列表-->
    <div class="contain_two" style="min-width: 675px;">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>
              <div class="">
                <span>#</span>
              </div>
            </th>
            <th class=""><span>等级数字</span></th>
            <th>
              <div class="">
                <span>经验值</span>
              </div>
            </th>
            <th><span>每日最大收益</span></th>
            <th class=""><span>操作</span></th>
          </tr>
        </thead>
        <tbody id="staff_info" class="">
          <tr class="contLi" v-for="(list,index) in tableData">
            <td>
              <div class=""><span class="">{{index+1}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.grades}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.experience}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.maxGains}}</span></div>
            </td>
            <td class="">
              <el-button type="info" @click="edit(index)">编辑</el-button>
              <el-button type="danger" @click="open2(index)">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="block pagination" v-show='nullContentPagination'>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>
      <div class="nullContent" v-show='nullContent'>暂无数据</div>
    </div>
    <!--添加用户等级弹窗-->
    <!--<div class="tankuang" v-show="adverShow">
      <div class="modal-content">
        <form id="" class="" novalidate="">
          <div class="modal-header">
            <button type="button" class="close home-close" @click="closes">
                            <span @click="closes"><img src="../../assets/images/icon_tanc_close@2x.png" width="15px"
                                                       style="margin-top: 10px;"></span>
            </button>
            <h1 class="modal-title">添加用户等级</h1>
          </div>
          <div class="modal-body ">
             
          </div>
          <div class="modal-footer">
            <el-button type="info" v-show="addcode" @click="codeedixbtn()">保存</el-button>
            <el-button type="info" v-show="editcode" @click="editsave()">保存</el-button>
            <el-button type="info" @click="cancels">取消</el-button>
          </div>
        </form>
      </div>
    </div>-->
    <!--添加用户等级弹窗-->
    <div class="tankuang" v-show="adverShow">
      <div class="bomb" style="height: 385px;">
        <div class="bomb_header">
          <p>添加用户等级</p>
          <span @click="closes"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
        </div>
        <div class="bomb_content" style="height: 237px">
          <p>
                <span>等级数字：</span>
                <input v-model="rankNumber" style="margin-left:23px" type="text" name="grades" id="rank_number" class="rank_number advertiser" maxlength="2" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"  placeholder="请输入等级数字">
            </p>
            <p>
                <span>经验值：</span>
                <input v-model="experience" style="margin-left:37px" type="text" name="experience" id="experience" class="experience advertiser" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"  placeholder="请输入该等级需要的经验值">
            </p>
            <p>
                <span>每日最大收益：</span>
                <input v-model="rankProfit" type="text" name="maxGains" id="rank_profit" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9.]/g,'')"  class="rank_profit advertiser" placeholder="请输入每日最大收益">
            </p>
        </div>
        <div class="bomb_footer">
          <input type="button" v-show="addcode" @click="codeedixbtn()" value="保存"> 
          <input type="button" v-show="editcode" @click="editsave()" value="保存"> 
          <input type="button" @click="cancels" value="取消">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
// 导入地址数据 
import addressData from '../../assets/js/addressData.js'
// 加载地址数据
function formatData(data) {
  return data
}
export default {
  name: 'levelManage',
  data() {
    return {   
      nullContent: false,
       nullContentPagination: true, 
      hbdetail:false,  
      advLink:'../../../static/img/icon_xinjian_picture@2x.png',
      advHomer:'',
      advTitle:'',
      total:1,
      currentPage: 1,
      value1: '',
      adverShow: false,
      tableData: [],
      lists: [],
      list:{},
      rankNumber:'',
      rankProfit:'',
      experience:'',
      money:'',
      exper:'',
      xianjin:false,
      integral:false,
      bianji:false,
      id:'',
      addcode:false,
      editcode:false,
    }
  },
  created: function () {
    this.levelManage(1)
  },
  methods: {
    cancels: function () {
      this.adverShow = false;
    },
    closes:function(){
      this.hbdetail = false
      this.adverShow = false
    },
    // 判断
    panduan(){
      if ($("#rank_number").val() == null || $("#rank_number").val() == "") {
        this.$message('请输入等级数字');
        return false;
    }
    if ($("#experience").val() == null || $("#experience").val() == "") {
      this.$message('请输入给等级需要的经验值');
        return false;
    }
    if ($("#rank_profit").val() == null || $("#rank_profit").val() == "") {
      this.$message('请输入每日最大收益');
        return false;
    }
    return true;
    },
    // 点击添加用户等级按钮
    addAdvertisers:function(){
      this.adverShow = true
      $('.tankuang .bomb_title').text("添加用户等级")    
       $('#rank_number').prop('disabled',false)
      this.addcode = true
      this.editcode = false
      this.rankNumber = ''
      this.rankProfit = ''
      this.experience = ''
    },
    // 添加用户等级下的保存
    codeedixbtn(){
      if(this.panduan() == false){
        return
      }else{
      var list = {
            token:sessionStorage.token,
            grades: this.rankNumber,//等级数字
            maxGains: this.rankProfit,//最大收益
            experience: this.experience//经验值
        };
      this.addlevellist(list).then((data)=>{
        console.log(data)
          if(data.code == 200){
            this.cancels()
            this.levelManage(this.currentPage)
          }else{
            this.$message('添加用户等级失败')
          }
      }).catch(msg => console.log(msg))
      }
    },
    // 用户等级页面 编辑  
    edit(index){
      console.log(index)
     this.adverShow = true
      $('.tankuang .bomb_title').text("修改用户等级")    
      this.editcode = true
      this.addcode = false
      this.rankNumber = this.tableData[index].grades
      this.rankProfit = this.tableData[index].maxGains
      this.experience = this.tableData[index].experience
      $('#rank_number').prop('disabled',true)
      this.id = this.tableData[index].id
      console.log(this.id)
  },
  // 编辑下的保存按钮
    editsave(){
      if(this.panduan() == false){
        return
      }else{
     var shuju = {
            token:sessionStorage.token,
            grades: this.rankNumber.toString(),//等级数字
            maxGains: this.rankProfit.toString(),//最大收益
            experience: this.experience,//经验值
            id:this.id
        };
    this.leveleditlist(shuju).then((data)=>{
      console.log(data)
      if(data.code == 500){
            this.cancels()
            this.levelManage(this.currentPage)
          }else{
            this.$message(data.message)
          }
    }).catch(msg => console.log(msg));
    }
    },

    
    // 获取用户等级页面数据
    levelManage(i) {
      this.$store.commit('showLoading');
      let token = sessionStorage.token;
      this.levelManagelist({
        token: token,
      }).then((data) => {
        this.$store.commit('hiddenLoading');
        console.log(data);
        if (data.code === 200) {
          this.nullContent = false;
          this.nullContentPagination = true;
          if (data.data.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              return;
          }
          // this.total = data.data.count;
          this.tableData = data.data;
        } else {
          this.$message(data.message)
        }
      }).catch(msg => console.log(msg));
    },
    // 用户等级页面删除
    excodeDel(i){
      this.levelDellist({
        id:this.tableData[i].id,
        token:sessionStorage.token
      }).then((data)=>{
        console.log(data)
        if (data.code === 200) {
            this.levelManage(this.currentPage)
        } else {
            this.$message('删除失败')
        }
      }).catch(msg => console.log(msg));     
    },
    open2(index) {
      console.log(index)
      console.log(this.tableData[index].id)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.excodeDel(index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    // 分页跳转
    handleCurrentChange(val) {
        this.currentPage = val;
        this.levelManage(val);
    },
    
...mapActions(['levelManagelist','addlevellist','leveleditlist','levelDellist'])

  }
}

</script>
<style scoped>
.el-button--success{
  width: 96px;
  margin-top: 2px;
}
  
  .add_reward {
    background: rgb(82, 186, 130);
    border-radius: 5px;
    width: 115px;
    height: 36px;
    border: none;
    margin-left: 45px;
    color: #fff;
  }  
  th,
  td {
    text-align: center;
  }
  
  .contain_two {
    margin-top: 15px;
  }
  
  .tankuang {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow: auto;
    z-index: 1500;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
  
    .bomb_content p {
    text-align: left;
    margin: 27px 0;

  }
  
  .bomb_content input[type=text] {
    width: 256px;;
    height: 36px;
    margin-left: -4px;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
  }
  ::-webkit-input-placeholder {
    color:#bfcbd9;  
}  
    
  .egRatio {
    width: 50%;
    top: 0;
    left: 201px;
    position: absolute;
    color: #a5a3a3;
  }
  
  .modal-footer {
    text-align: center
  }
  
  .modal-footer button {
    margin: 0 8px;
  }
  
  
  
  
  h4 {
    border-bottom: 1px solid rgb(229, 229, 229);
    margin-bottom: 12px;
    margin-top: 10px;
    font-size: 2.2rem;
    font-weight: 300;
    text-align: left;
    line-height: 34px;
    padding-bottom: 10px;
  }
  
  .needmoney input {
    width: 50%;
  }
  
  .needmoney input[type=text] {
    width: 57%;
  }
  
  .browseunit input[type=text] {
    width: 31%;
  }
  .clickunit input[type=text] {
    width: 31%;
  }
  
  .dingxiang input[type=text] {
    width: 57%;
  }
  
  .interest li {
    width: 20%;
    float: left;
    padding: 10px 0;
  }
  .moneydafault p{
    float: left;
    margin: 0 10px;
    width:30%;
  }
  .moneydafault p input[type=text]{
    width:60%;
  }
  .fl{
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 15px;
  }
  .fr{
    width: 50%;
    float: right;
    text-align: left;
  }
  .modal-detail{
    margin-top: 89px;
  }
  .modal-detail p{
    font-size: 16px;
    margin:10px 0;
  }
  .modal-detail p:nth-of-type(1){
    width: 100%;
    text-align: left;
    padding-left: 15px;
    margin: 3px 0;
    padding-top: 4px;
  }
  #ad_queue{
    margin:10px 0;
  }
  #ad_queue span{
    font-size: 16px;
  }
  .el-date-editor{
    width: 297px!important;
    margin-left:8px!important;
}
.reward li input[type=text]{
width:58%;
margin-left: 6px;
}
.reward li span{
  margin-left:5px;
}
.reward li{
  text-align: left;
  float:left;
  width:25%;
}
 table th{
    padding:0;
    height: 40px;
    line-height: 40px;
}
.table > tbody > tr{
    padding:0;
}
/*.table thead{
  background-color: #eef1f6;
}*/
.levelManage{
   width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
}
.bomb_footer input:nth-child(1) {
    background: #3C5570;
  }
  .bomb_footer input:nth-child(2) {
    background: #3C5570;
  }
  .bomb_footer input:nth-child(3) {
    background: #DDDDDD;
  }
</style>